<template>
  <div>
    <h1>门店显示</h1>
    <input type="button" value="添加" class="btn btn-primary" @click="Add" />
    <hr />
    
    门店信息:
    <input type="text" v-model="params.name">
    <input
      type="button"
      value="搜索"
      class="btn btn-primary"
      @click="show"
    />
    <hr/>
    <input
      type="button"
      value="批量删除"
      class="btn btn-primary"
      @click="IdsDel"
    />
    <input
      type="button"
      value="批量上架"
      class="btn btn-primary"
      @click="UpState(1)"
    />
    <input
      type="button"
      value="批量下架"
      class="btn btn-primary"
      @click="UpState(0)"
    />
    <input
      type="button"
      value="导出"
      class="btn btn-primary"
      @click="DaoChu"
    />

    <table class="table table-bordered">
      <tbody>
        <tr>
          <td><input type="checkbox" v-model="check" @click="allCheck" /></td>
          <td>Id</td>
          <td>门店名称</td>
          <td>门店电话</td>
          <td>门店地址</td>
          <td>门店图片</td>
          <td>门店状态</td>
          <td>门店创建时间</td>
          <td>门店更新时间</td>
          <td>是否删除</td>
          <td>操作</td>
        </tr>
        <tr v-for="itme in ojbInfo.list" :key="itme.Id">
          <td>
            <input
              type="checkbox"
              :value="itme.Id"
              v-model="Ids"
              @change="OneCheck"
            />
          </td>
          <td>{{ itme.Id }}</td>
          <td>{{ itme.Name }}</td>
          <td>{{ itme.Phone }}</td>
          <td>{{ itme.Address }}</td>
          <td><img src="/src//views/ImgWWW/111.png" width="80px" height="80px" alt=""></td>
          <td>{{ itme.State==0?'下架(0)':'上架(1)' }}</td>
          <td>{{ itme.CeratTime }}</td>
          <td>{{ itme.UpdateTime }}</td>
          <td>{{ itme.IsDel }}</td>
          <td>  
            <input type="button" value="删除" @click="delOne(itme.Id)" />
            <input type="button" value="修改" @click="UpOjb(itme.Id)" />
            <input type="button" value="上架" v-if="itme.State == 0" @click="OneUpState(itme.Id,1)" />
            <input type="button" value="下架" v-if="itme.State == 1" @click="OneUpState(itme.Id,0)" />
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup lang="ts">
import { useRouter, useRoute } from "vue-router";
import axios from "axios";
import { ref, reactive, onMounted } from "vue";
const router = useRouter();
const route = useRoute();

//分页显示传过去参数
let params = reactive({
  name: "",
  index: 1,
  size: 43,
});

//储存后端传过来的数据
let ojbInfo: any = reactive({
  list: [],
  toCount: 0,
  toPage: 0,
});

//存储全选之后id
let Ids = ref([]);

//声明变量设置全选全不选的按钮选择与不选中
let check = ref(false);

//函数======================================================================
onMounted(() => {
  show();
});

//修改
const UpOjb=(id:any)=>{
    //跳转反填页面
    router.push({
      path:'/upShop',
      query:{
        id:id,
      },
    });
};

//导出
const DaoChu=()=>{
  // location.href="https://localhost:7142/api/Shop/DaoExcel"
   location.href= `https://localhost:7142/api/Shop/DaoExcel?name=${params.name}&index=${params.index}&size=${params.size}`

}


//单个上下架
const OneUpState= (id:any,state: any) => {
  //2.发送网络请求
  axios({
    url: "https://localhost:7142/api/Shop/Upsteta",
    method: "PUT",
    params: {
      ids: id,
      steta: state,
    },
  })
    .then((res) => {
      alert("修改状态成功");
    //   check.value = false;
    //   Ids.value = [];
      show();
    })
    .catch((arr) => {
      alert("修改状态失败");
    });
};


//批量上下架
const UpState = (state: any) => {
  //1.提示信息
  if (Ids.value.length == 0) {
    alert("必选一项");
    return;
  }
  //2.发送网络请求
  axios({
    url: "https://localhost:7142/api/Shop/Upsteta",
    method: "PUT",
    params: {
      ids: Ids.value.toString(),
      steta: state,
    },
  })
    .then((res) => {
      alert("修改状态成功");
    //   check.value = false;
    //   Ids.value = [];
      show();
    })
    .catch((arr) => {
      alert("修改状态失败");
    });
};

//单个删除
const delOne = (id: any) => {
  //1.删除提示信息
  if (confirm("是否删除")) {
    //发送网络请求删除
    axios({
      url: "https://localhost:7142/api/Shop/DelShopId",
      method: "Delete",
      params: {
        Ids: id,
      },
    })
      .then((res) => {
        if (res.data == 1) {
          alert("删除成功");
          show();
        }
      })
      .catch((arr) => {
        alert("删除失败");
        return;
      });
  }
};

//批量删除
const IdsDel = () => {
    console.log(Ids)
  //1.提示必选(不可为空)
  if (Ids.value.length <= 0) {
    alert("必选一项");
    return;
  }
  //2.删除友好提示
  if (confirm("是否删除")) {
    //3.发送网络请求
    axios({
      url: "https://localhost:7142/api/Shop/DelShopId",
      method: "DELETE",
      params: {
        ids: Ids.value.toString(),
      },
    })
      .then((res) => {
        if (res.data == 1) {
          alert("删除成功");
          check.value = false;
          show();
        }
      })
      .catch((arr) => {
        alert("删除失败");
        show();
      });
  }
};

//单个都选则全选
const OneCheck = () => {
  //思路:ids长度和data.list的长度相同 checked为true否则为false
  if (Ids.value.length == ojbInfo.list.length) {
    check.value = true;
  }else{
    check.value = false;
  }
};

//全选全不选
const allCheck = () => {
  check.value = !check.value;
  //实现全选
  if (check.value == true) {
    // Ids.value = ojbInfo.list.map((itme: any) => {
    //   var aa = itme.Id;
    //   return aa;
    // }); //作用就将
    Ids.value = ojbInfo.list.map((itme:any) => { return itme.Id});
  } 
  else {
    Ids.value = [];
  }
  console.log(Ids);
};

//点击添加按钮跳转添加页面
const Add = () => {
  router.push("/shopAdd");
};

//获取数据
const show = () => {
  axios({
    url: "https://localhost:7142/api/Shop/GetShopList",
    method: "get",
    params: params,
  })
    .then((res) => {
      console.log(res);
      ojbInfo.list = res.data.list;
    })
    .catch((arr) => {});
};
</script>

<style scoped></style>
